<template>
  <div class="fifteen-swpbox">
    <el-tabs :tab-position="'top'">
      <el-tab-pane v-for="(dt,index) in lists" :key="index">
        <template #label>
          <div class="tqlist">
            <div :key="index" class="item">
              <div
                class="data-title"
                :style="{
                  borderLeft:index==0?'1px solid #eee':'none',
                  borderRight:(index==lists.length-1)?'1px solid #eee':'none'
                }"
              >{{ dateToWeek(dt.fxDate) }}</div>
              <div class="main" :style="{marginLeft:index==0?'0':'14px'}">
                <div class="time-box">
                  <p>{{ index==0?'今天':formatDateWithTime(dt.fxDate) }}</p>
                  <p class="text-day">{{ dt.textDay }}</p>
                </div>
                <div class="temp-box">
                  <div class="left-box">
                    <p style="color:#333;font-size: 16px;font-weight: bold;">{{ dt.textDay }}</p>
                    <p>{{ dt.tempMin }}°C～{{ dt.tempMax }}°C</p>
                  </div>
                  <div class="fx">
                    <i :class="`qi-${dt.iconDay}`" />
                  </div>
                </div>
                <p class="fl-box">
                  <img style="height:18px;" src="@/assets/weather/fl.png">
                  {{ dt.windDirDay }}  <el-icon color="#666" :size="14"><arrow-left /></el-icon>
                  {{ dt.windScaleDay }}级</p>
              </div>
            </div>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { Navigation } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import { getDailyWeather } from '@/api/plant'
import { dateToWeek, formatDateWithTime } from '@/utils/format'
import { useFramStore } from '@/pinia/modules/farm'
const framStore = useFramStore()

const lists = ref('')
const swiperObj = ''

onMounted(() => {
  get_daily_weather()
})

watch(() => framStore.weacherFarmItem, (n, o) => {
  if (swiperObj) {
    swiperObj.slideTo(0)// 切换到第一个slide，
  }
  get_daily_weather()
})

const get_daily_weather = async() => {
  const res = await getDailyWeather('D7', `${framStore.weacherFarmItem.locationLongitude},${framStore.weacherFarmItem.locationLatitude}`)
  lists.value = res.daily
}
</script>
<style lang="scss" >
    .fifteen-swpbox{
        box-sizing: border-box;
        overflow: hidden;
        width: 100%;
        background-color: #fff;
        padding:10px;
        .el-tabs__item{
          height:auto;
          padding: 0;
        }
        .el-tabs__nav-wrap{
          padding:0 40px;
        }
        .el-tabs__nav-next, .el-tabs__nav-prev{
          top: 50%;
          margin-top: -22px;
          font-size: 18px;
          background: #F3F3F3;
          width: 30px;
          text-align: center;
          line-height: 60px;
        }
        .el-tabs__active-bar,
        .el-tabs__nav-wrap::after{
          display: none;
        }
        .is-active{
          .tqlist .item .main{
            background: #F0FBF7;
            box-shadow: 0px 15px 18px 0px rgba(0,0,0,0.04);
            border: 1px solid rgba(4,174,112,0.21);
            .time-box{
              background: #F0FBF7;
              border-bottom: 1px solid #00AF7050;
            }
          }
        }

        .tqlist{
            box-sizing: border-box;
            display: flex;
            width: 100%;
            padding:0px;
            overflow: hidden;
            .item{
                box-sizing: border-box;
               // height: 200px;
                line-height: 26px;
                padding: 10px 0 0 0;
                color:#666;
                .data-title{
                    height: 40px;
                    background: #F7F7F7;
                    border-top: 1px solid #eee;
                    border-bottom: 1px solid #eee;
                    text-align: left;
                    line-height: 40px;
                    text-indent: 20px;
                    font-size:14px;
                    color:#333;
                    font-weight:600;
                }
                .main{
                    text-align: center;
                    position: relative;
                    z-index: 10;
                    border: 1px solid #eee;
                    margin-top: 10px;
                    margin-left: 15px;
                    padding-bottom: 10px;
                    width:180px;
                    .time-box{
                        display: flex;
                        justify-content: space-between;
                        border-bottom: 1px solid #eee;
                        height: 40px;
                        background: #F7F7F7;
                        align-items: center;
                        padding: 0 10px;
                        font-size: 14px;
                        color: #333;
                        .text-day{
                          min-width: 22px;
                          background-color:#00AF7010;
                          border-radius: 2px;
                          color:#00AF70;
                          font-size:13px;
                          padding:0 10px;
                        }

                    }
                    .temp-box{
                        display: flex;
                        justify-content: space-between;
                        padding: 10px 10px 5px 10px;
                        .left-box{
                            text-align: left;
                        }
                    }
                   .fl-box{
                        display: flex;
                        justify-content: left;
                        padding: 0 10px;
                        align-items: center;
                        font-size:14px;
                    }
                    .fx{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        i{
                            line-height: normal;
                            font-size: 24px;
                        }
                    }
                }
                .time{
                    text-align: center;
                }
                .flagbox{
                    display: flex;
                    box-sizing: border-box;
                    //width: 50px;
                    flex-flow: column;
                    line-height: normal;
                    padding: 0 8px 0 0;
                    span{
                        height: 20px;
                        line-height: 20px;
                        background-color: #f93d3d;
                        color: #fff;
                        padding: 0 3px;
                        &+span{
                            margin-top: 5px;
                        }
                    }
                }
            }
        }
    }
</style>
